<template>
  <div v-loading="loading" element-loading-text="Loading">
    <el-upload
      class="avatar-uploader"
      action="/api/coframe/storage/upload"
      :data="{ bucket: 'maleficentoss' }"
      :show-file-list="false"
      :headers="headers"
      :disabled="modelValue.url !== undefined"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <el-icon v-if="!modelValue.url" class="avatar-uploader-icon">
        <Plus />
      </el-icon>
      <div v-if="modelValue.id" class="avatar-container">
        <img :src="modelValue.url" class="avatar-image" />
        <el-space :size="15" class="avatar-actions">
          <el-button link icon="ZoomIn" @click="display = true" />
          <el-button link icon="Delete" @click="handleRemove" />
        </el-space>
      </div>
    </el-upload>

    <el-image-viewer
      v-if="display"
      :teleported="true"
      @close="() => (display = false)"
      :url-list="new Array(modelValue.url)"
    ></el-image-viewer>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { HolderStore } from '@/stores/holder.js'
import { ElMessage } from 'element-plus'
// import { StorageDelete } from '@/api/cloud/Storage.js'

const { modelValue } = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      fileUrl: undefined,
      fileId: undefined,
      fileKey: undefined,
    }),
  },
})

const emit = defineEmits(['update:modelValue'])

const holderStore = HolderStore()

const display = ref(false)

const loading = ref(false)

const headers = reactive({ Authorization: holderStore.accessToken })

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleProgress = (evt, file, files) => {
  loading.value = true
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleSuccess = (response, uploadFile) => {
  loading.value = false
  modelValue.id = response.data.fileId
  modelValue.name = response.data.fileKey
  modelValue.url = response.data.fileUrl
  emit('update:modelValue', modelValue)
}

const handleRemove = () => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  StorageDelete(modelValue.id).then(({ message }) => {
    modelValue.id = undefined
    modelValue.name = undefined
    modelValue.url = undefined
    emit('update:modelValue', {})
  })
}

const beforeUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('文件格式有误，请上传图片!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 4) {
    ElMessage.error('图片大小不能超过4MB!')
    return false
  }
  return true
}
</script>

<style scoped lang="scss">
.avatar-container {
  position: relative;
  height: 144px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

.avatar-image {
  width: 144px;
  height: 90px;
  margin: 30px 0;
}

.avatar-actions {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  opacity: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;

  .el-button {
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
  }
}

.avatar-actions:hover {
  opacity: 1;
  background-color: var(--el-overlay-color-lighter);
  transition: opacity var(--el-transition-duration);
}

:deep(.avatar-uploader .el-upload) {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: white;
  transition: var(--el-transition-duration-fast);
}

:deep(.el-icon .avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 144px;
  height: 144px;
  text-align: center;
}
</style>
